<template>
  <div>
    <el-input v-model="address"></el-input>
    <el-button @click="getID">搜索</el-button>
    <el-card
      v-for="item in weatherData"
      :key="item.id"
      @click.native="getWeather(item.id)"
    >
      {{ item }}
    </el-card>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <span>我来啦!</span>
      <el-card v-for="(item,index) in dailyWeather" :key="index">{{item}}</el-card>
    </el-drawer>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data () {
    return {
      address: '北京',
      weatherData: [],
      drawer: false,
      dailyWeather: []
    }
  },
  created () {
    this.getID()
  },
  methods: {
    getID () {
      axios({
        methods: 'get',
        url: `https://geoapi.qweather.com/v2/city/lookup?location=${this.address}&key=9b881657194c4a17ab8eee5c3d5a75e6`
      }).then((response) => {
        if (response.data.code === '200') {
          this.weatherData = response.data.location
        }
      })
    },
    // https://devapi.qweather.com/v7/weather/3d?location=101010100&key=9b881657194c4a17ab8eee5c3d5a75e6
    getWeather (id) {
      console.log(id)
      this.drawer = true
      axios({
        methods: 'get',
        url: `https://devapi.qweather.com/v7/weather/3d?location=${id}&key=9b881657194c4a17ab8eee5c3d5a75e6`
      }).then((res) => {
        console.log(res.data)
        this.dailyWeather = res.data.daily
      })
    }
  }
}
</script>

<style>
</style>
